<template>
	<view>
		<image src="/static/sybj.png" class="qjimg" mode=""></image>
		<view class="title">
			<image @click="fanhui" src="/static/zfh.png" :style="'margin-top:'+top+'px;'" mode=""></image>
			<view class="toptit" :style="'margin-top:'+top+'px;'">
				社区公告
			</view>
			<view class="" style="opacity: 0;">12</view>
		</view>
		<view class="box" style="padding-top:20rpx">
			<view class="box1 box1-2">
				<image class="box1-1" src="/static/jx.png" mode=""></image>
				<text class="text" style="margin-right: 20rpx;">{{info.type}}</text>
				{{info.title}}
			</view>

			<view class="box2">
				<view class="box2-1">
					<view class="box2-1-2" style="font-weight: 500;color: #131313;">
						{{info.man}}
					</view>
					<view class="box2-1-2" style="margin-left: 20rpx;">
						{{info.ctime}}
					</view>
				</view>
				<view class="box2-2">
					发表于 {{info.addcity}}
				</view>
			</view>

			<view class="box3" v-html="info.content">
				社区内容社区内容社区内容社区内容社区内容社区内容社区内容社区内容社区内容社区内容社区内容社区内容社区内容社区内容社区内容社区内容社区内容社区内容社区内容社
			</view>

			<!-- <image class="box4" src="/static/ggbj.png" mode=""></image> -->
			<view class="box5">
			</view>
			<!-- <view class="box6" @click="setfav()">
				<view class="box6-1">
					收藏({{info.fav}})
				</view>
				<image class="box6-2" :src="info.isfav>0?'https://x.bilinmeiju.com/static/shoucactive.png':'https://x.bilinmeiju.com/static/shouc.png'" mode=""></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	var that = this;
	export default {
		data() {
			return {
				bartop: 0,
				info: {},
				id: 0,
				top: '',
			}
		},
		onLoad(e) {
			this.id = e.id
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// this.CustomBar = menuButtonInfo.bottom * 1 + 10
			this.top = menuButtonInfo.top * 1 + 6
			this.getinfo()
		},
		methods: {
			getinfo() {
				this.$post('api/getinfo', {
					id: this.id
				}, res => {
					this.info = res.data;
				})
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				})
			},
			setfav() {
				that.$post('api/setcollection', {
					model: 'news',
					id: that.info.id
				}).then(res => {
					if (res.data.isfav) {
						that.info.isfav = 1;
						that.info.fav = that.info.fav * 1 + 1;
						uni.showToast({
							title: '收藏成功',
							icon: 'success'
						})
					} else {
						that.info.isfav = 0;
						that.info.fav = that.info.fav * 1 - 1;
						uni.showToast({
							title: '取消成功',
							icon: 'success'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(255, 255, 255);
	}

	.qjimg {
		width: 750rpx;
		height: 603rpx;
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.toptit {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 20rpx;
	}

	.title {
		display: flex;
		justify-content: space-between;
		align-items: center;

		>image {
			width: 20rpx;
			height: 36rpx;
			margin-left: 30rpx;
		}
	}

	.box {
		width: 90vw;
		margin: 35rpx auto;
		background-color: white;
		padding: 5vw;
		/* display: flex; */
	}

	.box1-1 {
		margin-bottom: -10rpx;
		width: 100rpx;
		height: 36rpx;
	}

	.box1-2 {
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 700;
		color: #131313;
		line-height: 50rpx;
	}

	.box2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx auto;
		margin-bottom: 30rpx;
	}

	.box2-1 {
		display: flex;
		align-items: center;
	}

	.box2-1-1 {
		margin-right: 20rpx;
		font-size: 24rpx;

		color: #131313;
		line-height: 50rpx;
	}

	.box2-1-2 {
		font-size: 24rpx;

		color: #898888;
	}

	.box2-2 {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #898888;

	}

	.box3 {
		margin-bottom: 20rpx;
		font-size: 30rpx;

		color: #333333;
		line-height: 50rpx;
	}

	.box4 {
		width: 100%;
		height: 381rpx;
	}

	.box5 {
		font-size: 20rpx;

		color: #999999;
		line-height: 20rpx;
		margin-top: 20rpx;
	}

	.box6 {
		margin-top: 40rpx;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}

	.box6-1 {
		font-size: 24rpx;

		color: #999999;
		line-height: 50rpx;
	}

	.box6-2 {
		width: 23rpx;
		height: 23rpx;
	}

	.text {
		margin-top: -20rpx;
		margin-left: -90rpx;
		margin-right: 20rpx;
		font-size: 20rpx;

		color: #245FF1;
	}
</style>
